//分数选择
function setMaxScore() {
    //分数选择

    $('.select .myselect-css').on('click', function (el) {
        $(el.target).next().show();

    })

    $('.select .select-ul li').on('click', function (el) {

        $(el.target).parent().parent().children().eq(0).val($(el.target).attr('value'))
        $(el.target).parent().hide()
    })
    $('#write-wj .content-ul').on('click', function (el) {

        if (!$(el.target).hasClass('myselect-css')) {
            $('.select .select-ul').hide()
        }

    })

}

//错误消息提示
function errMas(msg) {
    layer.msg(msg, {
        offset: 't',
        icon: 5
    });
}

//绑定显示当前选项右侧功能按钮的事件
function showCompileOrRemove() {
    $('#write-wj .content .content-list').hover(function (el) {

        if ($(el.target).children('div:last-child').hasClass('operation')) {
            $(el.target).children('div:last-child').css({
                display: 'block'
            })
        } else {

            if ($(el.target).hasClass('myselect-css')) {
                $(el.target).parent().next().css({
                    display: 'block'
                })
            } else if ($(el.target).hasClass('remark')) {
                $(el.target).parent().nextAll('.operation').css({
                    display: 'block'
                })
            } else if ($(el.target).hasClass('ct-num')) {
                $(el.target).parent().nextAll('.operation').css({
                    display: 'block'
                })
            } else {
                $(el.target).nextAll('.operation').css({
                    display: 'block'
                })
            }
        }
    }, function (el) {
        if ($(el.target).children('div:last-child').hasClass('operation')) {
            $(el.target).children('div:last-child').css({
                display: 'none'
            })
        }
        else if ($(el.target).hasClass('operation')) {
            $(el.target).css({
                display: 'none'
            })
        }
        else {
            if ($(el.target).hasClass('myselect-css')) {
                $(el.target).parent().next().css({
                    display: 'none'
                })
            } else if ($(el.target).hasClass('remark')) {
                $(el.target).parent().nextAll('.operation').css({
                    display: 'none'
                })
            } else if ($(el.target).hasClass('ct-num')) {
                $(el.target).parent().nextAll('.operation').css({
                    display: 'none'
                })
            } else if ($(el.target).hasClass('bj-operation') || $(el.target).hasClass('rm-operation')) {
                $(el.target).parent().parent().css({
                    display: 'none'
                })
            }
            else {
                $(el.target).nextAll('.operation').css({
                    display: 'none'
                })
            }

        }
    })

    RemoveOption();
    compileOption();
}

//右侧功能区事件绑定
showCompileOrRemove();

//删除选项
function RemoveOption() {
    $('#write-wj .content .operation .rm-operation').unbind().on('click', function (el) {
        let index = $(el.target).parent().parent().parent().index() - 2;
        //右侧同步
        $(el.target).parent().parent().parent().remove();
        //左侧同步
        $('#option .option-list li').eq(index).remove();

        let length = $('#write-wj .content .content-list').length;

        for (let i = 0; i < length; i++) {
            $('#write-wj .content .content-list').eq(i).children('div:first').children('.ct-num').text(i + 1)
            $('#option .option-list li').eq(i).children('span:first').text(i + 1)
        }
    })


}
//编辑选项
function compileOption() {
    $('#write-wj .content .operation .bj-operation').unbind().on('click', function (el) {

        let num = $(el.target).parent().parent().parent().children('div:first').children('.ct-num').text()
        let index = $(el.target).parent().parent().parent().index() - 2;

        let oldhtml = $(el.target).parent().parent().parent().html();
        let oldOption = $(el.target).parent().parent().prev().prev().prev().children('span:last').text()
        let oldRemark = $(el.target).parent().parent().prev().prev().children('span').text()

        let oneop = `

                <div class="opli"><span>选项：</span><span><input type="text" value='${oldOption}' class="myinput-css" id='titleop'></span></div>
                <div class="opli"><span>备注：</span><span><input type="text" value='${oldRemark}' class="myinput-css" id='remarkop'></span></div>
                <div class="opli">
                    <button class="layui-btn layui-btn-primary layui-border-black" id="canelop">取消</button>
                    <button class="layui-btn layui-btn-normal" id="crnewop">确定</button>
                </div>
        `;
        $(el.target).parent().parent().parent().removeClass().html(oneop).addClass('content-li add-li')
        //文本框高亮显示
        textboxhighlight();

        //取消编辑
        $('#write-wj #canelop').on('click', function (qxel) {
            $(qxel.target).parent().parent().removeClass().html(oldhtml).addClass('content-li content-list')
            //重新绑定选项右侧功能区的显示
            showCompileOrRemove();
        })

        //确定编辑
        $('#write-wj #crnewop').on('click', function (qdel) {

            let title = $('#write-wj #titleop').val().trim();

            let remark = $('#write-wj #remarkop').val();

            if (title.length === 0) return errMas('选项内容不能为空');

            let template = `
                    <div><span class="ct-num">${num}</span>.&nbsp;<span class="option-name">${title}</span></div>
                    <div><span class="remark">${remark}</span></div>
                    <div class="select">
                        <input type="text" class="myselect-css" value="请选择">
                        <ul class="select-ul">
                            <li value="1">1</li>
                            <li value="2">2</li>
                            <li value="3">3</li>
                        </ul>
                    </div>
                    <div class="operation">
                        <div class="ico-operation">
                            <div class="bj-operation" title="编辑"></div>
                        </div>
                        <div class="ico-operation">
                            <div class="rm-operation" title="删除"></div>
                        </div>
                    </div>

            `;
            $(qdel.target).parent().parent().removeClass().html(template).addClass('content-li content-list')

            $('#option .option-list li').eq(index).children('span:last').text(title)

            //重新绑定选项右侧功能区的显示
            showCompileOrRemove();


        })



    })
}

//文本框高亮显示
textboxhighlight();



//渲染选项
function renderOption(title, remark) {
    let num = $('#write-wj .content-list').length + 1
    let template = `
            <li class="content-li content-list">
                    <div><span class="ct-num">${num}</span>.&nbsp;<span class="option-name">${title}</span></div>
                    <div><span class="remark">${remark}</span></div>
                    <div class="select">
                        <input type="text" class="myselect-css" value="请选择">
                        <ul class="select-ul">
                            <li value="1">1</li>
                            <li value="2">2</li>
                            <li value="3">3</li>
                        </ul>
                    </div>
                    <div class="operation">
                        <div class="ico-operation">
                            <div class="bj-operation" title="编辑"></div>
                        </div>
                        <div class="ico-operation">
                            <div class="rm-operation" title="删除"></div>
                        </div>
                    </div>
                </li>
            `;
    $('#write-wj .add-content').before(template)
    // $('#option .option-list ul').append(`<li>${num}. ${title}</li>`)
    $('#option .option-list ul').append(`<li><span>${num}</span>. <span>${title}</span></li>`)

}

//添加新项
$('#write-wj .add-content a').on('click', function () {

    let oneop = `
    <li class="content-li add-li">
            <div class="opli"><span>选项：</span><span><input type="text" class="myinput-css" id='titleop'></span></div>
            <div class="opli"><span>备注：</span><span><input type="text" class="myinput-css" id='remarkop'></span></div>
            <div class="opli">
                <button class="layui-btn layui-btn-primary layui-border-black" id="canelop">取消</button>
                <button class="layui-btn layui-btn-normal" id="crnewop">确定</button>
            </div>
        </li>
    `;

    //显示新增选项input框
    $(this).parent().before(oneop).hide()
    $('#write-wj .content').scrollTop($('#write-wj .content').prop("scrollHeight"), 200)
    //文本框高亮显示
    textboxhighlight();

    //取消添加
    $('#write-wj #canelop').on('click', function () {
        $(this).parent().parent().remove();
        $('#write-wj .add-content').show()
    })

    //确定创建
    $('#write-wj #crnewop').on('click', function () {

        let title = $('#write-wj #titleop').val().trim();

        let remark = $('#write-wj #remarkop').val();

        if (title.length === 0) return errMas('选项内容不能为空');

        $(this).parent().parent().remove();

        renderOption(title, remark)

        $('#write-wj .add-content').show()

        //重新绑定选项右侧功能区的显示
        showCompileOrRemove();


    })

})




//保存问卷并返回首页
function savequestionnaire() {

    let title = $('#write-wj #quest-title').val()
    let remark = $('#write-wj #quest-remark').val();
    let optionArr = []

    for (let index = 0; index < $('#write-wj .content-list').length; index++) {
        let obj = {}
        obj.content = $(`#write-wj .content-list:eq(${index}) .option-name`).text()
        obj.remark = $(`#write-wj .content-list:eq(${index}) .remark`).text()
        optionArr.push(obj)
    }

    if (title.trim().length === 0 && optionArr.length === 0) return errMas('问卷主题内容不能为空和必须存在一个选项');

    //创建问卷请求
    axios.post('/home/savequest/wjs', {
        title,
        remark,
        optionArr,
    }).then(res => {
        res = res.data;
        if (res.code === 200) {
            location.href = '/'
        }
        else {
            errMas('保存失败')
        }
    })


}
//创建问卷并返回首页
function createquestionnaire() {
    // location.href = '/'

    let title = $('#write-wj #quest-title').val()
    let remark = $('#write-wj #quest-remark').val();
    let optionArr = []

    for (let index = 0; index < $('#write-wj .content-list').length; index++) {
        let obj = {}
        obj.content = $(`#write-wj .content-list:eq(${index}) .option-name`).text()
        obj.remark = $(`#write-wj .content-list:eq(${index}) .remark`).text()
        optionArr.push(obj)
    }

    if (title.trim().length === 0 && optionArr.length === 0) return errMas('问卷内容不能为空');

    //选项分数上限
    $('#myprompt').show();

    $('#myprompt .pm-btn').unbind().on('click', function () {
        let value = $('#myprompt .max-score').val();
        let endtime = $('#myprompt #endtime').val();
        if (value.trim() !== '' && Number(value.trim()).toString() !== 'NaN') {

            if (new Date(endtime) < new Date()) {
                let isnext = confirm('你输入的截止时间无效确定继续吗？')
                if (!isnext) return;
                endtime = null
            }

            $('#myprompt').hide();
            console.log({
                title,
                remark,
                maxScore: value,
                endTime: endtime,
                optionArr
            });

            //创建问卷请求
            axios.post('/home/addquest/wjs', {
                title,
                remark,
                maxScore: value,
                optionArr
            }).then(res => {
                res = res.data;
                if (res.code === 200) {
                    location.href = '/'
                }
                else {
                    errMas('创建失败')
                }
            })

        }
        else {
            errMas('分数格式不正确,请重新输入');
        }
    })

}

//编辑问卷并返回首页
function editquestionnaire() {
    let questId=$('#write-wj').attr('questId');
    let title = $('#write-wj #quest-title').val()
    let remark = $('#write-wj #quest-remark').val();
    let optionArr = []

    for (let index = 0; index < $('#write-wj .content-list').length; index++) {
        let obj = {}
        obj.content = $(`#write-wj .content-list:eq(${index}) .option-name`).text()
        obj.remark = $(`#write-wj .content-list:eq(${index}) .remark`).text()
        optionArr.push(obj)
    }

    if (title.trim().length === 0 && optionArr.length === 0) return errMas('问卷主题内容不能为空和必须存在一个选项');

    //创建问卷请求
    axios.post('/home/edit/commitquest', {
        questId,
        title,
        remark,
        optionArr,
    }).then(res => {
        res = res.data;
        if (res.code === 200) {
            location.href = '/'
        }
        else {
            errMas('保存失败')
        }
    })
}